<route lang="json5">
{
	style: {
		onReachBottomDistance: 100,
	},
}
</route>

<script setup lang="ts">
import ViewContainer from "@/layouts/ViewContainer.vue";
import titleConfig from "./missing.title";
import Form from "@/components/StorageForm/index";
import List from "@/components/List/index.vue";
import { missingService } from "@/service/missing";

const Card = Form.MissingListCard;

const searchValue = ref();

const defaultParams = reactive({
	mainOrderNumber: "",
});

onReachBottom(() => {});

const handleSearch = () => {
	defaultParams.mainOrderNumber = searchValue.value;
};

const handleRegister = () => {
	uni.navigateTo({ url: "/pages/missingRegister/index" });
};

onShow(() => {
	console.log(123);
	
})
</script>

<template>
	<ViewContainer :title="titleConfig" innerClass="outbound-page">
		<template #titleRight>
			<view class="scan" @click="handleRegister">登记缺件</view>
		</template>

		<view class="search" id="search-bar">
			<wd-search v-model="searchValue" placeholder="输入主单号查询">
				<template #suffix>
					<wd-button class="search-btn" :round="false" @click="handleSearch"
						>搜索</wd-button
					>
				</template>
			</wd-search>
		</view>

		<view class="outer-divider"></view>

		<List :fetchMehod="missingService.getList" :defaultParams="defaultParams">
			<template #listItem="props">
				<Card :data="props.data" />
				<div class="divider"></div>
			</template>
		</List>
	</ViewContainer>
</template>

<style lang="less" scoped>
.scan {
	color: #5aabfc;
	font-size: 33px;
	margin-right: 20px;
}

.divider {
	width: 100%;
	height: 40px;
}

.search {
	width: 100%;
	position: fixed;
	left: 0;
	z-index: 100;
	transform: translateY(-30px);
}

.search-btn {
	width: 150px;
	margin: 0 20px;
}

.outer-divider {
	width: 100%;
	height: 130px;
}

.button-group {
	display: flex;
	justify-content: flex-end;

	.wd-button {
		margin: 0;
		width: 200px;

		&:first-child {
			margin-right: 20px;
		}
	}
}
</style>
